<template>
  <view class="index-all">
    <view class="warning-info">
        <view class="title"><image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>告警信息  </view>
				<view class="row">
					<view class="w32">告警日期:</view>
					<view class="text-right">{{ alarmInfo.alarmDate ? dayjs(alarmInfo.alarmDate).format('YYYY-MM-DD') : '--' }}</view>
				</view>
				<view class="row">
					<view class="w32">告警类型：</view>
					<view class="text-right">{{ alarmInfo.stateTag == 'FX' ? '预警复现' : '超期未整改' }}</view>
				</view>
				<view class="row">
					<view class="w32">预警数量:</view>
					<view class="text-right">{{ `${alarmInfo.warnTotalNum||0}条` }}</view>
				</view>
				<view class="row">
					<view class="w32">预警整改数量:</view>
					<view class="text-right">{{ `${alarmInfo.warnRectificationNum||0}条` }}</view>
				</view>
    </view>
    <view class="warning-info"  v-if="urgeShow=='0'">
      <uv-form ref="form" :errorType="errorType" :model="formData" :rules="rules" labelWidth="150">
        <view class="form-box textAlignLeft">
          <uv-form-item label="督办意见" prop="opinions" labelPosition="top">
            <template #label>
              <view class="requireStar">督办意见</view>
            </template>
            <view class="areaWidth">
              <uv-textarea v-model="formData.opinions" placeholder="请输入督办意见" height="116rpx" maxlength="200" count></uv-textarea>
            </view>
          </uv-form-item>
        </view>
      </uv-form>
    </view>
    <view class="warning-info" v-if="alarmInfo.alarmUrgeState == '1'">
      <view class="s-top-title">
        <view class="s-top-title-left">
          <image :src="imgMinioPath + '/pco/tit-icon1.png'" class="s-title-bg"></image>
          {{ alarmInfo.urgeUserName ? alarmInfo.urgeUserName : '--' }}的督办
        </view>
        <view class="s-top-title-right">
          {{alarmInfo.urgeTime ? dayjs(alarmInfo.urgeTime).format('YYYY-MM-DD HH:mm:ss') : '--' }}
        </view>
      </view>
      <view class="row row-line">
        <view class="black-font">{{ alarmInfo.opinions }}</view>
      </view>
    </view>
    <view class="sure-button-box" style="width: 100%" v-if="urgeShow=='0'">
      <button class="sure-button" :disabled="loading" @tap="submit">确认</button>
    </view>
  </view>
</template>

<script setup>
const {proxy} = getCurrentInstance();
import dayjs from "dayjs";
import api from "@/api/pco/alarm/alarmInfo";
import {ref} from "vue";
const emits = defineEmits(['complete'])
import config from '@/common/config';
let imgMinioPath = ref(config.IMG_MINIO_PATH);
let props = defineProps({
  id: {
    type: String,
    default: () => {
      return "";
    }
  },
  urgeShow: {
    type: String,
    default: () => {
      return "";
    }
  }

});
let alarmInfo = ref({});
let loading = ref(false);
const errorType = ref('message');
let formData = reactive({
  id: props.id,
  alarmUrgeState:'1',
  urgeUserId: uni.getStorageSync('userInfo').user.id,
  urgeUserName:uni.getStorageSync('userInfo').user.nickName,
  opinions: '',
  urgeSignature: '',
});
const rules = reactive({
  opinions: [
    {
      type: 'string',
      required: true,
      message: '请输入督办意见',
      trigger: ['change', 'blur']
    }
  ],
});
let form = ref();
/** 确认按钮 */
let submit = (e) => {
  formData.id = props.id;
  form.value.validate().then(res => {
    proxy.http.post(api.alarmUpdateUrgeInfo, formData).then(res => {
      if (res.code === 0) {
        uni.showToast({title: '督办成功', icon: 'success', duration: 2000});
        setTimeout(() => {
          goBack();
        }, 1000)
      } else {
        uni.showToast({title: res.msg, icon: 'none'})
      }
    })
  })
}

/** 返回上一页 **/
let goBack = (e) => {
  uni.$emit("refresh", {});
  uni.navigateBack();
}
let getAlarmInfo = () => {
  proxy.http.get(api.alarmInfoQuery(props.id)).then(res => {
    if(res.code === 0) {
      alarmInfo.value = res.data
    }
  })
};
onMounted(() => {
    getAlarmInfo();
});


let toRectification = () => {
  emits('toRectification', true);
}

</script>
<style lang="scss" scoped>
.index-all {
  width: 100vw;
  background: #f6f6f6;
}

.warning-info {
  background: #fff;
  margin: 20rpx 16rpx 20rpx;
  border-radius: 20rpx;
  display: flex;
  flex-direction: column;
  padding: 30rpx 20rpx;
  position: relative;

  .s-top-title{
    padding-left: 40rpx;
    font-size: 32rpx;
    font-weight: 600;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.9);
    position: relative;
    margin-bottom: 10rpx;
    display: flex;
    justify-content: space-between;
    .s-top-title-left {
      .s-title-bg{
        width: 120px;
        height: 14px;
        position: absolute;
        left: 0;
        bottom: 12px;
      }
    }
    .s-top-title-right {
      color: #3D3D3D;
      width: 150px;
      font-size: 28rpx;
      font-weight: 500;
      line-height: 30px;
      text-align: right;
      padding-right: 10rpx;
    }

  }
  .title{
      padding-left: 40rpx;
      font-size: 32rpx;
      font-weight: 600;
      line-height: 24px;
      color: rgba(0, 0, 0, 0.9);
      position: relative;
      margin-bottom: 24rpx;
      .left{
          position: relative;
          padding-left: 40rpx;
      }
      .s-title-bg{
          width: 120px;
          height: 14px;
          position: absolute;
          left: 0;
          bottom:5px;
      }
  }
  ::v-deep .uv-collapse-item__content__text {
    padding: 12px 13px;

  }
  .row {
    color: #3D3D3D;
      margin-bottom: 16rpx;
    display: flex;
    justify-content: space-between;
    padding: 0px 24rpx;
      font-size: 28rpx;
      &:last-child {
          margin-bottom: 0;
      }
    .w32 {
      color: #8B8B8B!important;
      width: 32%;
    }
    image {
      height: 200px;
      width: 100%;
    }
  }

  .analysis {
    color: blue;
  }
  .areaWidth {
    margin: 24rpx 4rpx 0;
    width: 100%;
    ::v-deep .uv-textarea {
      padding: 0;
    }
    ::v-deep .uv-textarea__field{
      text-align: left!important;
      padding: 10px!important;
    }

  }
  ::v-deep .uv-form-item__body {
    padding: 0 !important;
  }
}
.text-right {
    width: 68%;
    text-align: right;
}
</style>